<template>
  <div v-if="!isMain && isView" class="view-equip-detail-wrap">
    <px-scrollbar class="view-equip-detail">
      <div style="display: flex; align-items: center; justify-content: space-between; margin: 16px 0 24px">
        <div style="display: flex; align-items: center">
          <px-button type="primary" icon="ArrowLeft" @click="backMainPage">返回</px-button>
          <div style="margin-right: 8px; margin-left: 16px; font-size: 20px; font-weight: bold; color: rgb(0 0 0 / 90%)">
            {{ formValue.missingId }}
          </div>
          <px-tag
            v-if="formValue.rectifyStatus"
            effect="plain"
            :style="{
              color: `${tagColorList[formValue.rectifyStatus]}`,
              border: `1px solid ${tagBorderColorList[formValue.rectifyStatus]}`,
              backgroundColor: `${tagBgColorList[formValue.rectifyStatus]}`
            }"
          >
            {{ formValue.rectifyStatusDesc }}
          </px-tag>
          <span v-else>-</span>
        </div>
        <div>
          <px-button
            v-if="formValue.rectifyStatus === 'UNRESPONSE' && reportUserName == formValue.reportUser && props.isFrom === 'defect'"
            v-has="'ALL_SAFEMANAGE_DEFECT_EDIT'"
            plain
            type="primary"
            @click="toEditPage"
            >编辑</px-button
          >
          <px-button
            v-if="formValue.rectifyStatus === 'UNRESPONSE'"
            v-has="'ALL_SAFEMANAGE_DEFECT_REPLY_DATE'"
            plain
            type="primary"
            @click="replyRectifyDateVisible = true"
            >回复整改日期</px-button
          >
          <px-button
            v-if="formValue.rectifyStatus === 'DOING' || formValue.rectifyStatus === 'DELAY' || formValue.rectifyStatus === 'UNDO'"
            v-has="'ALL_SAFEMANAGE_DEFECT_IMPROVE'"
            plain
            type="primary"
            @click="rectifyVisible = true"
            >整改</px-button
          >
          <px-button
            v-if="formValue.rectifyStatus === 'DELAY' || formValue.rectifyStatus === 'UNDO'"
            v-has="'ALL_SAFEMANAGE_DEFECT_DOING'"
            plain
            type="primary"
            @click="handleDoing"
            >整改中</px-button
          >
          <px-button
            v-if="formValue.rectifyStatus === 'DOING' || formValue.rectifyStatus === 'DELAY' || formValue.rectifyStatus === 'UNDO'"
            v-has="'ALL_SAFEMANAGE_DEFECT_DELAY'"
            plain
            type="primary"
            @click="delayRectifyVisible = true"
            >延期</px-button
          >
          <px-button
            v-if="formValue.rectifyStatus === 'DONE' || formValue.rectifyStatus === 'FINISHED'"
            v-has="'ALL_SAFEMANAGE_DEFECT_TO_IMPROVE'"
            plain
            type="primary"
            @click="handleToImprove"
            >改善管理</px-button
          >
          <px-button
            v-if="formValue.rectifyStatus === 'DONE' && reportUserName == formValue.reportUser"
            v-has="'ALL_SAFEMANAGE_DEFECT_REJECT'"
            plain
            type="primary"
            @click="handleReject"
            >驳回</px-button
          >
          <px-button
            v-if="formValue.rectifyStatus === 'DONE' && reportUserName == formValue.reportUser"
            v-has="'ALL_SAFEMANAGE_DEFECT_FINISH'"
            plain
            type="primary"
            @click="handleFinish"
            >确认完成</px-button
          >
          <px-button
            v-if="formValue.rectifyStatus === 'DONE' && formValue.missingOwnerList?.includes(userId + '')"
            v-has="'ALL_SAFEMANAGE_DEFECT_ABORT'"
            plain
            type="primary"
            @click="handleAbort"
            >撤销</px-button
          >
        </div>
      </div>
      <div class="view-equip-title">缺失信息</div>
      <div class="view-equip-wrap">
        <div class="view-equip-content">
          <div class="view-equip-item plus">
            <div class="label">缺失编号</div>
            <div class="text">{{ formValue?.missingId || "-" }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item half">
            <div class="label">科室</div>
            <div class="text">{{ formValue?.classNameDesc || "-" }}</div>
          </div>
          <div class="view-equip-item half">
            <div class="label">缺失类别</div>
            <div class="text">{{ formValue.missingTypeDesc || "-" }}</div>
          </div>
        </div>
        <div v-if="formValue.missingType === 'EQP'" class="view-equip-content">
          <div class="view-equip-item half">
            <div class="label">系统</div>
            <div class="text">{{ formValue?.systemName || "-" }}</div>
          </div>
          <div class="view-equip-item half">
            <div class="label">设备编号</div>
            <div class="text">{{ formValue?.eqpId || "-" }}</div>
          </div>
        </div>
        <div v-if="formValue.missingType === 'EQP'" class="view-equip-content">
          <div class="view-equip-item half">
            <div class="label">设备名称</div>
            <div class="text">{{ formValue?.eqpName || "-" }}</div>
          </div>
          <div class="view-equip-item half">
            <div class="label">设备位置</div>
            <div class="text">{{ formValue?.missingPositionDescAll || "-" }}</div>
          </div>
        </div>
        <div v-if="formValue.missingType === 'EQP'" class="view-equip-content">
          <div class="view-equip-item half">
            <div class="label">详细位置</div>
            <div class="text">{{ formValue?.missingDetailPosition || "-" }}</div>
          </div>
          <div class="view-equip-item half">
            <div class="label">缺失等级</div>
            <div class="text">{{ formValue.missingLevelDesc || "-" }}</div>
          </div>
        </div>
        <div v-if="formValue.missingType === 'EQP'" class="view-equip-content">
          <div class="view-equip-item half">
            <div class="label">责任人</div>
            <div class="text view-equip-item-tag" v-if="formValue.missingOwnerNameList && formValue.missingOwnerNameList.length > 0">
              <px-tag class="tag" v-for="(item, index) in formValue.missingOwnerNameList" :key="index">
                {{ item }}
              </px-tag>
            </div>
            <span v-else>-</span>
          </div>
          <div class="view-equip-item half">
            <div class="label">缺失来源</div>
            <div class="text">{{ formValue.missingResourceDesc || "-" }}</div>
          </div>
        </div>
        <div v-if="formValue.missingType === 'EQP'" class="view-equip-content">
          <div class="view-equip-item plus">
            <div class="label">关联单号</div>
            <div class="text">{{ formValue?.relationNumber || "-" }}</div>
          </div>
        </div>
        <div v-if="formValue.missingType !== 'EQP'" class="view-equip-content">
          <div class="view-equip-item half">
            <div class="label">缺失位置</div>
            <div class="text">{{ formValue?.missingPositionDescAll || "-" }}</div>
          </div>
          <div class="view-equip-item half">
            <div class="label">详细位置</div>
            <div class="text">{{ formValue?.missingDetailPosition || "-" }}</div>
          </div>
        </div>
        <div v-if="formValue.missingType !== 'EQP'" class="view-equip-content">
          <div class="view-equip-item half">
            <div class="label">缺失等级</div>
            <div class="text">{{ formValue.missingLevelDesc || "-" }}</div>
          </div>
          <div class="view-equip-item half">
            <div class="label">缺失来源</div>
            <div class="text">{{ formValue.missingResourceDesc || "-" }}</div>
          </div>
        </div>
        <div v-if="formValue.missingType !== 'EQP'" class="view-equip-content">
          <div class="view-equip-item half">
            <div class="label">责任人</div>
            <div class="text view-equip-item-tag" v-if="formValue.missingOwnerNameList && formValue.missingOwnerNameList.length > 0">
              <px-tag class="tag" v-for="(item, index) in formValue.missingOwnerNameList" :key="index">
                {{ item }}
              </px-tag>
            </div>
            <span v-else>-</span>
          </div>
          <div class="view-equip-item half">
            <div class="label">关联单号</div>
            <div class="text">{{ formValue?.relationNumber || "-" }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item half">
            <div class="label">缺失描述</div>
            <div class="text">{{ formValue?.missingDesc || "-" }}</div>
          </div>
          <div class="view-equip-item half">
            <div class="label">限期整改</div>
            <div class="text" v-if="formValue?.deadlineRectifyTime" style="color: #ef4444">
              {{ formValue?.deadlineRectifyTime?.split(" ")[0] || "-" }}
            </div>
            <div class="text" v-else>-</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item plus">
            <div class="label">现场照片</div>
            <div class="text" style="display: flex; flex-wrap: wrap">
              <PhotoUpload photoType="view" :photoData="{ moduleName: 'ifp-digitaltwins' }" :photoList="formValue.missingPictureList" />
            </div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item half">
            <div class="label">上报人</div>
            <div class="text">{{ formValue?.reportUser || "-" }}</div>
          </div>
          <div class="view-equip-item half">
            <div class="label">上报时间</div>
            <div class="text">{{ formValue?.reportTime || "-" }}</div>
          </div>
        </div>
        <!-- 响应之后才展示 -->
        <div v-if="formValue.rectifyStatus !== 'UNRESPONSE' && formValue.rectifyStatus !== 'DONE'" class="view-equip-content">
          <div class="view-equip-item half">
            <div class="label">响应人</div>
            <div class="text">{{ formValue?.responseUser || "-" }}</div>
          </div>
          <div class="view-equip-item half">
            <div class="label">响应时间</div>
            <div class="text">{{ formValue?.responseTime || "-" }}</div>
          </div>
        </div>
        <div v-if="formValue.rectifyStatus !== 'UNRESPONSE' && formValue.rectifyStatus !== 'DONE'" class="view-equip-content">
          <div class="view-equip-item plus">
            <div class="label">计划整改日期</div>
            <div v-if="formValue.planRectifyTime" class="text">{{ formValue.planRectifyTime.split(" ")[0] }}</div>
            <div v-else class="text">-</div>
          </div>
        </div>
      </div>
      <!-- 有延期才展示 -->
      <div v-if="formValue.delayRecordList && formValue.delayRecordList.length > 0" class="view-equip-title">延期整改</div>
      <div v-if="formValue.delayRecordList && formValue.delayRecordList.length > 0">
        <template v-for="(item, index) in formValue.delayRecordList || []" :key="index">
          <div>第{{ index + 1 }}次延期</div>
          <div class="view-equip-wrap">
            <div class="view-equip-content">
              <div class="view-equip-item half">
                <div class="label">延期整改日期</div>
                <div v-if="item.delayRectifyTime" class="text">{{ item.delayRectifyTime.split(" ")[0] }}</div>
                <div v-else class="text">-</div>
              </div>
              <div class="view-equip-item half">
                <div class="label">延期原因</div>
                <div class="text">{{ item?.delayReason || "-" }}</div>
              </div>
            </div>
            <div class="view-equip-content">
              <div class="view-equip-item half">
                <div class="label">提交人</div>
                <div class="text">{{ item?.submitUser || "-" }}</div>
              </div>
              <div class="view-equip-item half">
                <div class="label">提交时间</div>
                <div class="text">{{ item?.submitTime || "-" }}</div>
              </div>
            </div>
          </div>
        </template>
      </div>
      <!-- 缺失整改的展示情况 -->
      <div v-if="formValue.rectifyStatus === 'DONE'" class="view-equip-title">缺失整改</div>
      <div v-if="formValue.rectifyStatus === 'DONE'" class="view-equip-wrap">
        <div class="view-equip-content">
          <div class="view-equip-item plus">
            <div class="label">整改措施</div>
            <div class="text">{{ formValue?.rectifyMeasure || "-" }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item plus">
            <div class="label">整改后照片</div>
            <div class="text" style="display: flex; flex-wrap: wrap">
              <PhotoUpload photoType="view" :photoData="{ moduleName: 'ifp-digitaltwins' }" :photoList="formValue.rectifyPictureList" />
            </div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item half">
            <div class="label">整改人</div>
            <div class="text">{{ formValue?.rectifyUser || "-" }}</div>
          </div>
          <div class="view-equip-item half">
            <div class="label">整改时间</div>
            <div v-if="formValue.rectifyTime" class="text">{{ formValue.rectifyTime.split(" ")[0] }}</div>
            <div v-else class="text">-</div>
          </div>
        </div>
      </div>
      <div class="view-equip-title">处理进度</div>
      <px-table :data="formValue.processRecordList" class="equip-table" size="small" max-height="400" border>
        <px-table-column
          v-for="(item, index) in processTableColumns"
          :key="index"
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :fixed="item.fixed"
        >
          <template #default="scope">
            {{ scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-" }}
          </template>
        </px-table-column>
      </px-table>
    </px-scrollbar>
  </div>
  <!-- 整改弹窗 -->
  <RectifyDialog
    :dialogVisible="rectifyVisible"
    :missingId="props.missingId"
    :rectifyUser="formValue.rectifyUser"
    @closeDialog="
      rectifyVisible = false;
      getDetail();
    "
  />
  <!-- 回复整改日期 -->
  <ReplyRectifyDateDialog
    :dialogVisible="replyRectifyDateVisible"
    :missingId="props.missingId"
    @closeDialog="
      replyRectifyDateVisible = false;
      getDetail();
    "
  />
  <!-- 驳回 -->
  <RejectDialog
    :dialogVisible="rejectVisible"
    :missingId="props.missingId"
    @closeDialog="
      rejectVisible = false;
      getDetail();
    "
  />
  <!-- 延期整改 -->
  <DelayRectifyDialog
    :dialogVisible="delayRectifyVisible"
    :missingId="props.missingId"
    @closeDialog="
      delayRectifyVisible = false;
      getDetail();
    "
  />
</template>
<script setup lang="ts">
import { changeRectifyStatusDefect, getDefect } from "@/api/defect";
import PhotoUpload from "@/components/Upload/PhotoUpload.vue";
import { PxMessageBox } from "px-ui";
import { computed, reactive, toRefs, watch } from "vue";
import { useRouter } from "vue-router";
import DelayRectifyDialog from "./DelayRectifyDialog.vue";
import RectifyDialog from "./RectifyDialog.vue";
import RejectDialog from "./RejectDialog.vue";
import ReplyRectifyDateDialog from "./ReplyRectifyDateDialog.vue";

// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["backMainPage", "queryTable", "toEditPage"]);
// 父级传过来的值
const props = defineProps([
  "isMain",
  "isView",
  "missingId",
  "userId",
  "reportUserName",
  "missingLevelList",
  "missingTypeList",
  "missingResourceList",
  "reportUserList",
  "isFrom"
]);
const router = useRouter();
// 显示隐藏
const isMain = computed(() => props.isMain);
const isView = computed(() => props.isView);
const tagColorList = {
  UNRESPONSE: "#EF4444", // 未响应
  UNDO: "#F59E0B", // 待整改
  DOING: "#3B82F6", // 整改中
  DELAY: "#EF4444", // 延期整改
  DONE: "#10B981" // 整改完成
};
const tagBorderColorList = {
  UNRESPONSE: "#FAC7C7", // 未响应
  UNDO: "#FCE2B6", // 待整改
  DOING: "#C6E2FF", // 整改中
  DELAY: "#FAC7C7", // 延期整改
  DONE: "#B7EAD9" // 整改完成
};
const tagBgColorList = {
  UNRESPONSE: "#FEECEC", // 未响应
  UNDO: "#FEF5E6", // 待整改
  DOING: "#ECF5FF", // 整改中
  DELAY: "#FEECEC", // 延期整改
  DONE: "#E8F8F3" // 整改完成
};
// 页面本身的值
const state = reactive<any>({
  formValue: {},
  rectifyVisible: false,
  replyRectifyDateVisible: false,
  rejectVisible: false,
  delayRectifyVisible: false,
  processTableColumns: [
    { prop: "processName", label: "节点名称", minWidth: "160", showOverflowTooltip: true },
    { prop: "remark", label: "说明", minWidth: "160", showOverflowTooltip: true },
    { prop: "accountName", label: "操作人", minWidth: "160", showOverflowTooltip: true },
    { prop: "createTime", label: "操作时间", minWidth: "160", showOverflowTooltip: true }
  ]
});
const { formValue, rectifyVisible, replyRectifyDateVisible, rejectVisible, delayRectifyVisible, processTableColumns } = toRefs(state);

// 监视isMain和isView值
watch(isMain, val => {
  if (!val && props.isView) {
    getDetail();
  } else {
    formValue.value = {};
  }
});
// 获取详情
const getDetail = async () => {
  const params = {
    missingId: props.missingId
  };
  const data = await getDefect(params);
  formValue.value = data;
  formValue.value.missingPictureList = data.missingPictureList || [];
  formValue.value.rectifyPictureList = data.rectifyPictureList || [];
};
// 整改中
const handleDoing = () => {
  PxMessageBox.confirm("要将整改状态变更为“整改中”吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      const params = {
        missingId: props.missingId,
        rectifyStatus: "DOING"
      };
      await changeRectifyStatusDefect(params);
      getDetail();
    })
    .catch(() => {});
};
// 返回主页面
const backMainPage = () => {
  emits("backMainPage");
  emits("queryTable");
};
// 编辑详情
const toEditPage = () => {
  emits("toEditPage", props.missingId);
};
// 跳转到改善管理
const handleToImprove = () => {
  const path = "/all/safeManage/improve";
  router.push({
    path: path,
    query: { id: props.missingId }
  });
};
// 驳回
const handleReject = () => {
  rejectVisible.value = true;
};
// 确认完成
const handleFinish = () => {
  PxMessageBox.confirm("确认整改完成后，该缺失整改项正式终止，不再允许修改，请确认", "整改完成确认", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      const params = {
        missingId: props.missingId,
        rectifyStatus: "FINISHED"
      };
      await changeRectifyStatusDefect(params);
      getDetail();
    })
    .catch(() => {});
};
// 撤销
const handleAbort = () => {
  PxMessageBox.confirm("您将对本次整改完成情况进行撤销，撤销后回退为整改中状态并可对整改结果进行修改", "撤销确认", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      const params = {
        missingId: props.missingId,
        rectifyStatus: "DOING"
      };
      await changeRectifyStatusDefect(params);
      getDetail();
    })
    .catch(() => {});
};
</script>
<style lang="scss" scoped>
@import url("@/views/all/equip/scss/view-detail.scss");
.view-equip-item-tag {
  .tag {
    margin-right: 10px;
    background-color: #ebf2fe;
    color: #3b82f6 !important;
    border: 1px solid #d7e6fd;
  }
}
</style>
